<template>
    <div class="Funnel">
        <div id="echart" ref="mychart"></div>
    </div>
</template>

<script>
// echarts相关
let echarts = require("echarts");
import { mapState } from "vuex";
export default {
  name: "Funnel",
  data() {
    return {
      myChart: {}
    };
  },
  computed: {
    ...mapState(["movies", "imags", "news", "articles"]),
    opt() {
      let obj = {
        title: {
        text: '漏斗图',
        subtext: '根据数据统计'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['新闻','文章','电影','图片']
    },
    series: [
        {
            name: '实情',
            type: 'funnel',
            left: '10%',
            width: '80%',
            height:'80%',
            label: {
                normal: {
                    formatter: '{b}实情'
                },
                emphasis: {
                    position:'inside',
                    formatter: '{b}实情: {c}%'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    opacity: 0.7
                }
            },
            data: [
                {value: this.news.length, name: '新闻'},
                {value: this.articles.length, name: '文章'},
                {value: this.movies.length, name: '电影'},
                {value: this.imags.length, name: '图片'}
            ]
        },
        {
            name: '实际',
            type: 'funnel',
            left: '10%',
            width: '80%',
            maxSize: '80%',
            height:'80%',
            label: {
                normal: {
                    position: 'inside',
                    formatter: '{c}%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    position:'inside',
                    formatter: '{b}实际: {c}%'
                }
            },
            itemStyle: {
                normal: {
                    opacity: 0.5,
                    borderColor: '#fff',
                    borderWidth: 2
                }
            },
            data: [
                {value: this.news.length, name: '新闻'},
                {value: this.articles.length, name: '文章'},
                {value: this.movies.length, name: '电影'},
                {value: this.imags.length, name: '图片'}
            ]
        }
    ]
      };
      return obj;
    }
  },
  mounted() {
    this.setEchart();
  },
  updated() {
    this.setEchart();
  },
  methods: {
    setEchart() {
      let dom = this.$refs.mychart;
      this.myChart = echarts.init(dom);
      this.myChart.setOption(this.opt);
    }
  }
};
</script>

<style scoped lang='scss'>
#echart {
  width: 500px;
  height: 300px;
}
</style>